<template>
  <teleport to="#loader">
    <div class="loader-container">
      <IconButton
        :icon="ICONS.SPINNER"
        size="lg"
        color="grey"
        :spin="true"
      ></IconButton>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import IconButton from "./IconButton.vue";
import { ICONS } from "../assets/icons";
import { onUnmounted } from "vue";

const node = document.createElement("div");
node.id = "loader";
document.body.append(node);

onUnmounted(() => {
  document.body.removeChild(node);
});
</script>

<style>
#loader {
  position: fixed;
  top: 30%;
  left: 50%;
  margin-left: -15px;

  .fa-xl {
    font-size: 40px !important;
  }
}
</style>
